<template>
	<view class="gauge-container" v-cloak>
		<canvas class="canvas" canvas-id="canvas"></canvas>
	</view>
</template>
<script>
	import Gauge from "./index.js";
	export default {
		name: "gauge",
		props: {
			sonRefresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: 0,
				grade: '',
				money: '',
				bgImg: '',
				btmText: "",
				valueColor: '',
				recoverySpeed: 0,
				progressColor: ["#9C1313", "#F84A36", "#FF792E", "#FF7E34", "#FF8A40", "#FFB02C", "#FFCA4C", "#7EB213",
					"#8FB51A", "#67AE09"
				],
			};
		},
		beforeCreate() {
			this.$nextTick(() => {
				this.getValue()
			})
		},
		created() {},
		mounted() {},
		watch: {
			'sonRefresh': {
				handler(e, l) {
					this.getValue()
				}
			}
		},
		methods: {
			stringToDate(dateStr, separator) {
				if (!separator) {
					separator = "-";
				}
				var dateArr = dateStr.split(separator);
				var year = parseInt(dateArr[0]);
				var month;
				if (dateArr[1].indexOf("0") == 0) {
					month = parseInt(dateArr[1].substring(1));
				} else {
					month = parseInt(dateArr[1]);
				}
				var day = parseInt(dateArr[2]);
				var date = new Date(year, month - 1, day);
				return date;
			},
			async getValue() {
				let res = await this.$fetch(this.$api.get_ratings, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.value = Number(res.data.score)
				this.grade = Number(res.data.grade)
				this.$emit('getGrade', this.grade)
				this.get_recovery_amount_accelerate()
			},
			// 获取评分回暖金额-加速回暖
			async get_recovery_amount_accelerate() {
				if ([2, 3].includes(this.grade)) {
					let a = this.$api.get_recovery_amount_accelerate
					let b = this.$api.get_recovery_amount
					try {
						await this.$fetch(this.grade == 3 ? a : b, {}, 'GET').then(res => {
							res.code && uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							let speed = res.data.mediumRange
							let money = res.data.amount
							let sdate = this.stringToDate(res.data.recoveryTime)
							let now = (new Date()).valueOf()
							sdate = (sdate).valueOf()
							let tours = sdate - now
							let recoveryDay = parseInt(tours / (1000 * 60 * 60 * 24));
							var tour = parseInt(tours / (1000 * 60 * 60))
							let recoveryTours = tour - recoveryDay * 24
							this.$emit('getMoney', money)
							this.$emit('getRecoverDay', recoveryDay)
							this.$emit('getRecoverTours', recoveryTours)
							if (this.grade == 2) {
								this.bgImg = "https://images.linglinggong.net/static/score/orangeScore.png"
								this.btmText = `已停止接单，回暖${speed}分/日`
							} else if (this.grade == 3) {
								this.bgImg = "https://images.linglinggong.net/static/score/light-redScore.png"
								this.btmText = `已停止接单，回暖${speed}分/日`
								let accelerated = res.data.accelerated
								this.$emit('getAccelerated', accelerated)
								if (res.data.purchase == 1) {
									let isPayAccelerated = true
									this.$emit('getIsPayAccelerated', isPayAccelerated)
								}
							}
							this.$nextTick(() => {
								this.newGude()
							})
						})
					} catch (e) {}
				} else {
					if (this.grade == 0) {
						this.valueColor = "#62B707"
						this.bgImg = "https://images.linglinggong.net/static/score/greenScore.png"
						this.btmText = "服务越好，任务越多"
					} else if (this.grade == 1) {
						this.bgImg = "https://images.linglinggong.net/static/score/yellowScore.png"
						this.btmText = "保持分值，努力加油"
					} else if (this.grade == 4) {
						this.bgImg = "https://images.linglinggong.net/static/score/redScore.png"
						this.btmText = "已封禁"
					}
					this.$nextTick(() => {
						this.newGude()
					})
				}
			},
			newGude() {
				new Gauge({
					canvasId: "canvas",
					width: 340,
					min: 0,
					max: 100,
					value: this.value,
					unit: "",
					showTick: true,
					startAngle: 1.03 * Math.PI,
					endAngle: -0.03 * Math.PI,
					progressColor: this.progressColor,
					valueColor: this.valueColor,
					trackColor: '#E4E4E4',
					btmText: this.btmText,
					bgImg: this.bgImg
				});
			}
		}
	};
</script>
<style>
	.gauge-container {
		padding: 20rpx 40rpx;
		text-align: left;
	}

	.canvas {
		width: 340px;
		height: 340px;
		transition: all linear 4s;
	}
</style>